<template>
  <div class="hotright">
    <div class="qfpublic">
      <p>热门搜索</p>
    </div>
    <div class="welfare">
      <div class="weimg"><img :src="img" /></div>
      <ul class="weltul">
        <li v-for="(item, index) in list" :key="index">
          <span class="span"></span>
          <router-link
            :to="{ name: 'Chengfruit', params: { id: item.id } }"
            class="link"
            >{{ item.title }}</router-link
          >
        </li>
      </ul>
      <div class="more">
        <router-link to="/Chengfruit" class="mlink">查看更多</router-link>
      </div>
    </div>
    <p class="clear"></p>
    <div class="daimao">
      <ul class="dmao">
        <li v-for="(item, index) in ltdm" :key="index">
          <router-link to="/" class="linkdm">{{ item.name }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      img: "",
      list: [
        // { txt: "凤眼果怎么吃?它的这些营养..." },
        // { txt: "专家推荐:用决明子泡茶最是..." },
        // { txt: "常喝薄荷茶好处多多，用来..." },
        // { txt: "经期能减肥吗?了解经期饮食..." },
        // { txt: "凤眼果怎么吃?它的这些营养..." },
        // { txt: "专家推荐:用决明子泡茶最是..." },
      ],
      ltdm: [
        // { title: "玳瑁", url: "Tortoise" },
        // { title: "芡实", url: " " },
        // { title: "番石榴叶", url: " " },
        // { title: "大血藤", url: " " },
        // { title: "鸽子", url: " " },
        // { title: "花蚊虫", url: " " },
        // { title: "朴松实", url: " " },
        // { title: "张公鱼", url: " " },
        // { title: "大黑头草", url: " " },
        // { title: "大剑叶木", url: " " },
        // { title: "芡实", url: " " },
        // { title: "番石榴叶", url: " " },
        // { title: "大血藤", url: " " },
        // { title: "鸽子", url: " " },
        // { title: "花蚊虫", url: " " },
        // { title: "朴松实", url: " " },
        // { title: "张公鱼", url: " " },
        // { title: "大黑头草", url: " " },
      ],
    };
  },
  created() {
    axios.get("/yangsheng/sousuo").then((res) => {
      // console.log(res.data.data);
      this.list = res.data.data;
      this.img = res.data.data[0].thumb;
      // console.log(this.res);
    });
    // .catch((err) => {console.log(err);});
    axios.get("/index/zhongyaofang").then((res) => {
      // console.log(res.data.data);
      this.ltdm = res.data.data;
    });
  },
};
</script>
<style scoped>
.hotright {
  background-color: #fce7d7;
}

.qfpublic {
  width: 450px;
}
.qfpublic p {
  color: #a70b0a;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 30px;
}
.welfare {
  width: 100%;
}
.welfare .weimg {
  width: 92%;
}
.weimg img {
  display: block;
  width: 100%;
}
.weltul {
  margin-top: 2rem;
}
.weltul a {
  font-size: 18px;
  color: #666666;
}
.weltul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
  height: 30px;
  color: #757371;
}
.weltul li .link:hover {
  color: #a40000;
  font-size: 22px;
  font-weight: 600;
}
.span {
  width: 18px;
  height: 18px;
  background-color: #a40000;
  border-radius: 9px;
  margin: 0 10px;
}
.more {
  background-color: #a40100;
  white-space: nowrap;
  border-radius: 25px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  width: 114px;
  padding: 10px 0;
  margin-top: 20px;
  float: right;
  margin-right: 8%;
}
.mlink {
  color: white;
}
.daimao {
  width: 100%;
  margin: 0 auto;
  margin-top: 6rem;
  /* overflow: hidden; */
}

.daimao li {
  color: #767472;
  text-align: center;
  font-size: 20px;
  width: 99px;
  height: 51px;
  float: left;
  line-height: 51px;
  margin-bottom: 24px;
  margin-right: 25px;
}
.daimao .linkdm {
  color: #767472;
  background: url("../assets/dm1.png") no-repeat;
  width: 100%;
  display: block;
}
.daimao .linkdm:hover {
  width: 120px;
  height: 61px;
  line-height: 61px;
  margin-right: 16px;
  font-size: 22px;
  color: #9f2a0c;
  font-weight: 550;
  margin-bottom: 29px;
  background: url("../assets/dm2.png") no-repeat;
  margin-top: -5px;
  margin-left: -10px;
}
</style>
